<template>
  <div class="register">
    <div class="border"></div>
    <div class="content">
      <div class="title">FlawPlatform 漏洞靶场 注册</div>
      <div class="form">
        <Input type="email" :errors="errors" :value.sync="email" placeholder="请输入邮箱" row-class-name="email" class-name="email" errors-key="email"/>
        <div style="font-size: 0">
          <Input :errors="errors" :value.sync="icaptcha" placeholder="请输入验证码" class-name="captcha" errors-key="captcha_code">
            <img slot="right" :src="captcha.image_base" alt="验证码" @click="get_captcha">
          </Input>
        </div>
        <button class="submit" @click="register" v-if="!running">立即注册</button>
        <button class="wait" v-else>{{ remaining_time }} 秒后重试</button>
      </div>
      <div class="to-login">
        已有账号？<router-link to="login">点击登录</router-link>
      </div>
    </div>
    <div
      style="height: 35px;line-height: 35px;background: #F2F7FF;border-radius: 4px;padding: 0 40px;">
      <span style="float: left;font-size: 12px;color: #7586A6;">©{{ new Date().getFullYear() }} J0hNs0N</span>
      <span style="float: right; padding-top: 6px">
            <a href="https://gitee.com/J0hNs0N/FlawPlatform" target="_blank"
               style="float: left;margin-right: 9px;margin-top: 3px;" rel="noopener">
                <img src="../assets/gitee_favicon.png" style="height: 16px;width: 16px;">
            </a>
            <a href="https://forum.butian.net/people/4602/community" target="_blank"
               style="float: left;margin-right: 9px;margin-top: 1px;" rel="noopener">
                <img src="https://forum.butian.net/ico.png" style="height: 20px;width: 20px;">
            </a>
            <a href="https://space.bilibili.com/274407612" target="_blank"
               style="float: left;margin-right: 9px;margin-top: 3px;" rel="noopener">
                <img src="https://www.bilibili.com/favicon.ico?v=1"
                     style="height: 16px;width: 16px;">
            </a>
        </span>
    </div>
  </div>
</template>

<script>
import Input from '../components/Input';

export default {
  name: 'Register',
  components: {
    Input
  },
  data() {
    return {
      email: '',
      icaptcha: '',
      captcha: {
        id: 0,
        image_base: ''
      },
      remaining_time: '',
      running: false,
      timing: 60,
      interval: null,
      errors: {

      }
    };
  },
  created() {
    this.get_captcha();
  },
  methods: {
    get_captcha() {
      this.$request.exec('get', 'get_captcha', null, this)
        .then((res) => {
          this.captcha = res.data;
        })
        .catch((res) => {
          this.$message.error(res.data.msg);
        });
    },
    register() {
      // 删除前后空白字符
      let email = this.email.trim();
      let icaptcha = this.icaptcha.trim();

      // 简单判断是否为空, 节省请求资源
      if (email === '' || email.length <= 0 || icaptcha === '' && icaptcha.length <= 0) {
        // Message.
        this.$message.error('邮箱与验证码不能为空。');
        return false;
      }

      let myReg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;

      if (!myReg.test(email)) {
        this.$message.error('邮箱格式不正确！');
        return;
      }

      let self = this;
      this.$request.exec('post', 'register', {
        email: email,
        image_id: this.captcha.id,
        captcha_code: icaptcha,
      }, this, true)
        .then((res) => {
          this.$message.success(res.msg);

          this.running = true;
          self.calc_remaining_time(res.data.timer);
          this.interval = setInterval(function () {
            self.calc_remaining_time(res.data.timer);
          }, 1000);
        })
        .catch((res) => {
          this.$message.error(res.data.msg);
          if (res.data.code === -1) {
            this.running = true;
            self.calc_remaining_time(res.data.data.timer);
            this.interval = setInterval(function () {
              self.calc_remaining_time(res.data.data.timer);
            }, 1000);
          }
        });
    },
    format_time(s) {
      return (s < 10) ? ('0' + s) : s;
    },
    calc_remaining_time(date1) {
      date1 = new Date(new Date(date1).getTime() + this.timing * 1000);

      let date2 = new Date();    //结束时间
      let date3 = date1.getTime() - date2.getTime();

      //计算出小时数
      let leave1 = date3 % (24 * 3600 * 1000);

      //计算相差分钟数
      let leave2 = leave1 % (3600 * 1000);

      //计算相差秒数
      let leave3 = leave2 % (60 * 1000);
      let seconds = this.format_time(Math.round(leave3 / 1000));

      if (parseInt(seconds) <= 0) {
        this.running = false;
        clearInterval(this.interval);
      }

      this.remaining_time = `${seconds}`;
    },
  }
};
</script>

<style scoped>
.register {
  width: 630px;
  min-width: 630px;
  background: #FFFFFF;
  box-shadow: 0px 3px 13px 0px rgba(71, 120, 199, 0.2);
  border-radius: 4px;
  margin: 7vw auto;
}

.border {
  height: .3vw;
  background: #4778C7;
  border-radius: 4px;
}

.register * {
  vertical-align: middle;
}

.content {
  padding: 0 40px;
  margin-bottom: 25px;
}

.register .title {
  font-size: 17px;
  color: #163366;
  line-height: 32px;
  margin: 40px 0 10px 0;
}

.form {
  font-size: 14px;
  color: #7586A6;
  line-height: 30px;
}

.email {
  margin-bottom: 15px;
}

.submit {
  color: #fff;
  background-color: #409eff;
}

.wait {
  color: #409eff;
  background-color: #ffffff;
  cursor: auto;
}

.submit,
.wait {
  margin-top: 35px;
  border-color: #409eff;
}

.submit:hover {
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}

.input.captcha {
  width: 150px;
  margin-right: 15px;
}

button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: .1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  width: 100%;
}

img {
  user-select: none;
  cursor: pointer;
}

.to-login {
  font-size: .9vw;
  text-align: center;
  margin-top:1vw;
}

</style>
